<style scoped lang="less">
  @import "./monitor.less";
</style>

<template>
  <section class="monitor">
    <el-container>
      <el-main>
        <!-- <div class="map-menu"></div> -->
        <!-- sync组件双向绑定 -->
        <!-- <bdmap :mapObj.sync="baiduMap"></bdmap> -->
        <!-- on emit 组件绑定 -->
        <map-panel :isNeedMapObj="true" @sendMapObj="getMapObj" :defaultZoom="12" defaultCity="宁波"></map-panel>
        <!-- <el-dialog title="跟踪" :visible.sync="trackDialog">
          <el-table :data="trackDialogData">
            <el-table-column property="entity_name" label="名称"></el-table-column>
            <el-table-column property="entity_desc" label="描述" width="200"></el-table-column>
            <el-table-column property="create_time" label="创建时间" width="150"></el-table-column>
          </el-table>
        </el-dialog> -->
      </el-main>
      <el-aside width="320px">
        <el-tabs type="border-card">
          <el-tab-pane label="车辆列表">
            <carTable :showSelection="true" @onCarTableCellClick="onCarTableCellClick"
                      @onCarTableSelection="onCarTableSelection"></carTable>
          </el-tab-pane>
        </el-tabs>
      </el-aside>
    </el-container>
  </section>
</template>

<script>
  import {
    addRealCarMapOverlay,
    addPolyline,
    getCircle,
    getPolygon,
    getBound,
    getInfoWindow,
    formatLngLat,
    getInfoWindowHtml
  } from '@/common/js/bdmap'
  import mapPanel from '@/components/map-panel'
  import carTable from '@/components/car-table'
  import {getAllCar, getCarFenceInfo, getMonitorCarInfo} from '@/api/mapMonit'
  import HashMap from '@/utils/hashmap'
  export default {
    name: 'monitor',
    data() {
      return {
        mapObj: null, // 地图对象
        carsMarkerMap: new HashMap(),        // 所有车辆数据
        // trackDialogData: [{
        // }],
        // trackDialog: false,
        multipleSelection: null, // 多选按钮值
        timer: null,
        carMarker: null,
        infoWindow: null,
        winStatus: false,
      }
    },
    mounted() {
      setTimeout(() => {
        this._getAllCar()
        if (this.timer) {
          clearInterval(this.timer)
        }
      }, 20)
    },
    methods: {
      // 获取所有车辆
      _getAllCar() {
        getAllCar().then(res => {
          if (res.code == 0) {
            for (let index in res.datas) {
              let item = res.datas[index]
              let point = new BMap.Point(item.longitude, item.latitude)
              let marker = addRealCarMapOverlay(item)
              this.carsMarkerMap.put(item.vecNo,marker);
              marker.disableMassClear();
              marker.addEventListener("click", (e) => {
                this.mapObj.clearOverlays() // 清除地图覆盖物
                this._getMonitorCarInfo(item.vecNo)
                this._getFenceInfo(item.vecNo)
                this.mapObj.setViewport([point])
              })
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      },
      // 表格单选框选中事件
      onCarTableSelection(val) {
        this.multipleSelection = val
      },
      // 表格单元格点击事件
      onCarTableCellClick(row, column, cell, event) {
        if (column.property == 'vecNo') {
          if (this.timer) {
            clearInterval(this.timer)
          }
          this.carMarker = null
          this.winStatus = false
          this.mapObj.clearOverlays() // 清除地图覆盖物
          this._getMonitorCarInfo(row.vecNo)
          this._getFenceInfo(row.vecNo)
          this.timer = setInterval(() => {
            this.winStatus = false
            this._getMonitorCarInfo(row.vecNo)
          }, 30000)
        }
      },
      _getFenceInfo(vecNo) {

        getCarFenceInfo(vecNo).then(res => {
          if (res.code == 0) {
            if (res.carrier) {

              // 画线
              let onLineCoordinates = [];

              // 增加承运商点
              if (res.carrier.type == 1) {
                getCircle(new BMap.Point(res.carrier.lnglat.split(",")[0], res.carrier.lnglat.split(",")[1]), res.carrier.radius, "blue")
              } else if (res.carrier.type == 2) {
                getPolygon(res.carrier.lnglat)
              }

              // 增加收货
              if (res.customer) {
                if (res.customer.type == 1) {
                  getCircle(new BMap.Point(res.customer.lnglat.split(",")[0], res.customer.lnglat.split(",")[1]), res.customer.radius, "green")
                } else if (res.customer.type == 2) {
                  getPolygon(res.customer.lnglat)
                }
              }

              // 增加发货点
              if (res.load) {
                if (res.load.type == 1) {
                  getCircle(new BMap.Point(res.load.lnglat.split(",")[0], res.load.lnglat.split(",")[1]), res.load.radius, "orange")
                } else if (res.load.type == 2) {
                  getPolygon(res.load.lnglat)
                }
              }

              if (res.route) {
                let route = res.route.lnglat
                let routeList = route.split(";")

                for (let i = 0; i < routeList.length; i++) {
                  // 线上的点
                  let item = routeList[i].split(",");
                  let point = new BMap.Point(item[0], item[1]);
                  onLineCoordinates.push(point);
                }
                addPolyline(onLineCoordinates)

              }

            }

          } else {
            this.$message({
              message: '车辆线路数据获取失败，请重新获取！',
              type: 'error'
            })
          }
        })
      },

      _getMonitorCarInfo(vecNo) {
        if (this.$route.name !== 'monitor') {
          clearInterval(this.timer)
          return false
        }
        getMonitorCarInfo(vecNo).then(res => {
          if (res.code == 0) {

            let point = new BMap.Point(res.gps[0].longitude, res.gps[0].latitude)
            if (!this.carMarker) {
              this.winStatus = true
              this.carMarker =    this.carsMarkerMap.get(vecNo)
            } else {
              this.carMarker.setPosition(point)
            }
//            this.carMarker.addEventListener("click", (e) => {
//              this.loadMapDialog(res)
//            })
            this.loadMapDialog(res)
            this.mapObj.setViewport([point])
          } else {
            clearInterval(this.timer)
            this.$message({
              message: '车辆实时数据获取失败，请重新获取！',
              type: 'error'
            })
          }
        })
      },


      // 组合地图窗口html
      loadMapDialog(row) {
        // formatLngLat异步格式化经纬度
        formatLngLat(row.gps[0].longitude, row.gps[0].latitude).then(res => {
          row.gps[0].address = res
          if (this.winStatus) {
            this.infoWindow = getInfoWindow(row)
            this.carMarker.openInfoWindow(this.infoWindow) //开启信息窗口
          } else {
            this.infoWindow.setContent(getInfoWindowHtml(row))
          }
        })
      },
      created() {
        if (this.timer) {
          clearInterval(this.timer)
        }
      },
      // 获取地图组件传递来的地图对象
      getMapObj(map) {
        this.mapObj = map
      },
    },
    components: {
      mapPanel,
      carTable
    }
  }
</script>
